@import '~styles/colors.less';

.types {
  text-align: right;
  margin-bottom: 6px;
}

.type {
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  margin-left: 16px;
  border-radius: 4px;
  cursor: pointer;

  &:after {
    content: ' ';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(0, 0, 0, 0.20);
    border-radius: 4px;
  }

  &:hover {
    &:after {
      border-color: @primary;
    }
  }
}

.solid {
  background-color: #999999;

  &.active {
    background-color: @primary;

    &:after {
      border-color: @primary;
    }
  }
}

.linear {
  background: -moz-linear-gradient(top, #ffffff 0%, #999999 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%,#999999 100%);
  background: linear-gradient(to bottom, #ffffff 0%,#999999 100%);

  &.active {
    background: -moz-linear-gradient(top, #ffffff 0%, @primary 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, @primary 100%);
    background: linear-gradient(to bottom, #ffffff 0%, @primary 100%);

    &:after {
      border-color: @primary;
    }
  }
}

.radial {
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #999999 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#999999 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%,#999999 100%);

  &.active {
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, @primary 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%, @primary 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%, @primary 100%);

    &:after {
      border-color: @primary;
    }
  }
}
